<template>
  <div>
    <div class="hotelDetailCard">
      <h1>
        {{ currentHotelInfo.title }}
      </h1>
      <div class="hotel-info">
        <a-card style="width: 250px;height:300px" :bordered="false">
          <img
                  alt="example"
                  :src="currentHotelInfo.picture"
                  slot="cover"
                  referrerPolicy="no-referrer"
                  class="hotelCard"
          />
        </a-card>
        <div class="info">
          <div class="items" v-if="currentHotelInfo.name">
            <span class="label">酒店名称：</span>
            <span class="value">{{ currentHotelInfo.name }}</span>
          </div>
          <div class="items" v-if="currentHotelInfo.address">
            <span class="label">地址</span>
            <span class="value">{{ currentHotelInfo.address }}</span>
          </div>
          <div class="items" v-if="currentHotelInfo.bizRegion">
            <span class="label">地区</span>
            <span class="value">{{ currentHotelInfo.bizRegion }}</span>
          </div>
          <div class="items" v-if="currentHotelInfo.rate">
            <span class="label">评分:</span>
            <span class="value">{{ currentHotelInfo.rate.toFixed(1) }}</span>
          </div>
          <div class="items" v-if="currentHotelInfo.hotelStar">
            <span class="label">星级:</span>
            {{ star_string[currentHotelInfo.hotelStar] }}
            <a-rate
                    class="rate"
                    style="font-size: 15px"
                    :value="star_map[currentHotelInfo.hotelStar]"
                    :count="star_map[currentHotelInfo.hotelStar]"
                    disabled
                    allowHalf
            />
          </div>
          <div class="items" v-if="currentHotelInfo.description">
            <span class="label">酒店简介:</span>
            <span class="value">{{ currentHotelInfo.description }}</span>
          </div>
        </div>
        <!--百度地图：-->
        <div class="baidumap" id="allmap"></div>
      </div>
      <a-divider></a-divider>
      <a-tabs>
        <a-tab-pane tab="房间信息" key="1">
          <RoomList :rooms="currentHotelInfo.rooms"></RoomList>
        </a-tab-pane>
        <!-- <a-tab-pane tab="酒店详情" key="2"> </a-tab-pane> -->
        <a-tab-pane tab="酒店评价" key="3">
          <CommentList></CommentList>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>
<script>
  import { mapGetters, mapActions, mapMutations } from "vuex";
  import RoomList from "./components/roomList";
  import CommentList from "./components/commentList";
  export default {
    data() {
      return {
        star_map: {
          Five: 5,
          Four: 4,
          Three: 3,
        },
        star_string: {
          Five: "五星级",
          Four: "四星级",
          Three: "三星级",
        },
        position_NKYYGS: {
          Name: '宜昌富力皇冠假日酒店',
          address: '湖北省宜昌市伍家岗区沿江大道169号',
          phoneNumber: '0717 6588888',
          bdLNG: 111.320654,
          bdLAT: 30.681541
        },
      };
    },
    name: "hotelDetail",
    components: {
      RoomList,
      CommentList,
    },
    computed: {
      ...mapGetters(["currentHotelInfo"]),
    },
    beforeMount() {
      this.set_currentHotelId(Number(this.$route.params.hotelId));
      this.getHotelById();

      console.log(this.currentHotelInfo);

    },
    beforeRouteUpdate(to, from, next) {
      this.set_currentHotelId(Number(to.params.hotelId));
      this.getHotelById();
      next();
    },
    mounted() {
      this.baiduMap();
    },
    methods: {
      ...mapMutations(["set_currentHotelId"]),
      ...mapActions(["getHotelById"]),
      baiduMap() {
        var map = new BMap.Map('allmap'); // 创建地图实例
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.OverviewMapControl());
        map.addControl(new BMap.MapTypeControl());
        // map.setMapStyle({ style: 'midnight' }) //地图风格

        map.clearOverlays();
        //将数据遍历
        //自定义信息窗口内容
        var sContent =
                '<div style="width:300px;"><p style="font-size:16px;font-weight:bold;margin-top: 10px;color:#d07852">' +
                this.position_NKYYGS.Name +
                '</p><p style="font-size:13px;margin: 5px 0;">地址：' +
                this.position_NKYYGS.address +
                '</p><p style="font-size:13px;margin: 5px 0;">电话：' +
                this.position_NKYYGS.phoneNumber +
                '</p><p style="font-size:13px;margin: 5px 0;">坐标：' +
                this.position_NKYYGS.bdLNG +
                ',' +
                this.position_NKYYGS.bdLAT;
        ('</div>');
        var point = new BMap.Point(this.position_NKYYGS.bdLNG, this.position_NKYYGS.bdLAT); // 创建点坐标
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
        map.centerAndZoom(point, 18); // 初始化地图，设置中心点坐标和地图级别
        // //点击图标时候调用信息窗口
        var infoWindow = new BMap.InfoWindow(sContent);
        marker.addEventListener('click', function() {
          this.openInfoWindow(infoWindow);
        });
      },
    },
  };
</script>
<style scoped lang="less">
  .baidumap {
    width: 100%;
    height: 400px;
  }
  //去除百度地图版权那行字 和 百度logo
  /*.baidumap > .BMap_cpyCtrl {*/
  /*  display: none !important;*/
  /*}*/
  /*.baidumap > .anchorBL {*/
  /*  display: none !important;*/
  /*}*/
  .hotelDetailCard {
    padding: 0 50px;
  }
  .hotelCard{
    width: 240px;
    height: 300px
  }
  .hotel-info {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    .info {
      padding: 10px 0;
      display: flex;
      flex-direction: column;
      margin-left: 20px;
      .items {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .label {
          margin-right: 10px;
          font-size: 18px;
        }
        .value {
          margin-right: 15px;
        }
      }
    }
  }
  .rate {
    margin-left: 10px;
    padding-bottom: 3px;
  }
</style>
